<template>
  <div>
    <el-dialog
      :title="dialog.title"
      :visible.sync="dialogFormVisible"
      class="title"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        style="text-align: left"
        ref="ruleForm"
      >
        <el-form-item label="头像" prop="headimgurl">
          <el-upload
            class="avatar-uploader"
            action="http://chst.vip/students/uploadStuAvatar"
            list-type="picture-card"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :limit="1"
            name="headimgurl"
            ref="head"
          >
            <img
              v-if="ruleForm.headimgurl"
              :src="ruleForm.headimgurl"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <el-form-item label="项目地址" prop="degree">
          <el-input v-model="ruleForm.degree"></el-input>
        </el-form-item>

        <el-form-item label="班级" prop="classess">
          <el-input v-model="ruleForm.classess"></el-input>
        </el-form-item>

        <el-form-item label="年龄" prop="age">
          <el-input v-model="ruleForm.age"></el-input>
        </el-form-item>

        <el-form-item label="城市" prop="city">
          <el-input v-model="ruleForm.city"></el-input>
        </el-form-item>

        <el-form-item label="学历" prop="productUrl">
          <el-input v-model="ruleForm.productUrl"></el-input>
        </el-form-item>

        <el-form-item label="描述" prop="description">
          <el-input v-model="ruleForm.description"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      ruleForm: {
        name: "",
        degree: "",
        classess: "",
        age: "",
        city: "",
        productUrl: "",
        description: "",
        headimgurl: "",
      },
      histroyForm: {},
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        degree: [
          { required: true, message: "请输入项目地址", trigger: "blur" },
        ],
        classess: [{ required: true, message: "请输入班级", trigger: "blur" }],
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        city: [{ required: true, message: "请输入城市", trigger: "blur" }],
        productUrl: [
          { required: true, message: "请输入学历", trigger: "blur" },
        ],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" },
        ],
      },
      dialog: {
        title: "",
        action: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    handleAvatarSuccess(r) {
      this.ruleForm.headimgurl = r.headimgurl;
    },
    // 添加学员
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          // 本地校验通过
          if (this.dialog.action === "add") {
            // 增加学员
            this.formTitle = "增加学员信息";
            this.$bus.$emit("updata", this.ruleForm);
            this.dialogFormVisible = false;

            // 清除表单信息
            this.$refs[ruleForm].resetFields();
          } else {
            this.$bus.$emit("action", this.ruleForm);
            this.dialogFormVisible = false;
          }
        }
      });
    },
  },
  mounted() {
    // 添加
    this.$bus.$on("isShow", (data) => {
      this.ruleForm = this.histroyForm;

      // 点击添加后的操作
      // 显示
      this.dialogFormVisible = data.isShow;
      // 一个状态
      this.dialog.action = data.options;
      // 标题
      this.dialog.title = data.title;
    });

    // 编辑
    this.$bus.$on("editShow", (data) => {
      // 显示
      this.dialogFormVisible = data.isShow;
      // 一个状态
      this.dialog.action = data.options;
      // 标题
      this.dialog.title = data.title;

      // 数据回显
      let { ...arr } = data.row;
      arr["classess"] = arr["class"];
      this.ruleForm = arr;
      // console.log(this.ruleForm);
    });

    this.histroyForm = this.ruleForm;
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.title {
  text-align: center;
}
</style>
